<!--
* description: 其他项目新增
* author: wangjuan
* createdDate: 2021-5-13
* logs:
-->
<template>
  <section class="history">
    <el-dialog
      v-dialogDrag
      :close-on-click-modal="true"
      title="其他项目"
      :append-to-body="true"
      :visible="popupsVisible"
      width="70%"
      @close="handleClose"
    >
      <dialogHeader
        slot="title"
        title="其他项目"
        :style-type="$store.state.app.dialogType"
      />
      <div class="app-container app-container-table">
        <!-- 单表格模版页面 -->
        <one-table-template
          ref="multipleTable"
          :dynamic-api-config="apiConfig"
          :dynamic-buttons="dynamicButtons"
          :dynamic-components="tableComponents"
          :dynamic-table-cols="dynamicTableCols"
          :dynamic-form-fields="formField"
          :dynamic-is-show-select="true"
          :dynamic-is-init-table="true"
          :dynamic-is-show-more-btn="true"
          :dynamic-api-style="'restful'"
          :dynamic-table-defult-height="300"
          :callback-obj="callbackObj"
        />
      </div>

    </el-dialog>
  </section>
</template>
<script>

import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import OneTableTemplate from '@/components/templates/oneTable'

export default {
  name: 'OtherAdd',
  components: {
    OneTableTemplate,
    dialogHeader: () => import('@/components/dialogHeader') // 弹窗标题
  },
  // 组件混入对象
  mixins: [oneTableWithViewTemplateMixins],
  props: {
    popupsVisible: { type: Boolean, default: false },
    rowData: { type: Object, default: () => ({}) },
    // 已经选择过的数据
    chosenList: { type: Array, default: () => ([]) }
  },
  data() {
    return {
      formField: {},
      selections: [],
      // 保存API配置对象
      apiConfig: {
        APIUrl: '/mp/e3sh/aftersale/appointmentVolumnService/queryAppointmentOther.do'
      },
      // 动态组件-按钮
      dynamicButtons: [
        {
          compKey: 'btnKey0',
          size: 'small',
          name: 'search',
          clickEvent: () => {
            if (!this.selections.length) {
              return this.$message('请至少选择一条数据！')
            }
            this.$emit('selectRows', this.selections, 'other')
            this.handleClose()
          },
          text: '选择'
        },
        {
          compKey: 'btnKey1',
          type: 'primary',
          size: 'small',
          name: 'search',
          clickEvent: () => this.queryTable(1),
          text: '查询'
        },
        {
          compKey: 'btnKey2',
          size: 'small',
          name: 'reset',
          clickEvent: () => {
            for (const attr in this.formField) {
              this.formField[attr] = ''
            }
          },
          text: '重置'
        }
      ],
      tableComponents: [
        {
          compKey: 'compKey1',
          labelName: '其他项目名称：',
          codeField: 'repairOtherName',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          span: 8,
          isMust: true
        }
      ],
      dynamicTableCols: [
        {
          prop: 'repairOtherId',
          label: '附加项目id',
          hidden: true,
          alwaysHidden: true
        },
        {
          prop: 'controlId',
          label: '并发控制ID',
          hidden: true,
          alwaysHidden: true
        },
        {
          prop: 'otherAmount',
          label: '费用合计',
          hidden: true,
          alwaysHidden: true
        },
        {
          prop: 'repairOtherName',
          label: '其他项目名称'
        },
        {
          prop: 'repairOtherRemark',
          label: '备注'
        }
      ],
      callbackObj: {
        onCheckSelectChange: (selection) => {
          this.selections = selection
          console.log(this.selections)
        }
      },
      // 表单数据（无需赋值，由混入对象赋值）
      initFormField: null,
      genCodeFiled: () => {}
    }
  },
  watch: {
    popupsVisible(isOpen) {
      if (isOpen) {
        for (const attr in this.formField) {
          this.formField[attr] = this.rowData[attr] || ''
        }
      }
      isOpen ? this.queryTable() : ''
    }
  },
  created() {
    this.genFormField()
  },
  mounted() {
    this.queryTable(1)
  },
  methods: {
    genFormField() {
      const viewPageCode = this.$route.path
      this.genCodeFiled = this.genUtil(this.tableComponents)
      const formField = this.genCodeFiled()
      this.formField = this.$utils.getFormField(this, formField, this.$ConfigCache.CacheConfig.cacheData[viewPageCode])
    },
    // 生成formField
    genUtil: (array) => (attr1 = 'codeField', attr2 = 'textField') => array.reduce((p, c) => {
      if (c[attr1].includes(',')) {
        const d = c[attr1].split(',')
        for (let i = 0; i < d.length; i++) {
          p[d[i]] = ''
        }
      } else {
        p[c[attr1]] = ''
      }
      // eslint-disable-next-line no-prototype-builtins
      c.hasOwnProperty(attr2) ? p[c[attr2]] = '' : ''
      return p
    }, {}),

    getSelectable(row, index, ref) {
      let flag = true
      this.chosenList.forEach(item => {
        if (item['repairOtherId'] === row['repairOtherId']) {
          flag = false
        }
      })
      return flag
    },
    changeCode(code, text, codeField, comType) {
      const d = parseInt(comType)
      this.orderList[d][codeField] = code
    },
    handleClose() {
      this.$emit('update:popupsVisible', false)
    },
    closePopups() {
      for (const attr in this.formField) {
        this.formField[attr] = ''
      }
    },
    reset() {
      for (const attr in this.formField) {
        this.formField[attr] = ''
      }
    }
  }
}
</script>
<style scoped>
</style>
